<template>
  <div class="medal">
    <div class="medal-img-box" @click="gotoPage">
      <img class="medal-img" :src="show_url + medalInfo.images[0]" />
      <!-- <div class="medal-mask" v-if="medalInfo.status == 3">{{ medalInfo.status_name }}</div> -->
    </div>
    <span class="medal-name">{{ medalInfo.goods_name }}</span>
  </div>
</template>

<script>
import { isPhone } from "@/utils";

export default {
  name: "Medal",
  props: {
    show_url: {
      type: String,
      required: true
    },
    medalInfo: {
      type: Object,
      required: true
    }
  },
  methods: {
    gotoPage() {
      const { id, goods_id, status, icon } = this.medalInfo;

      if (isPhone()) {
        if (this.medalInfo.status == 3) {
          this.$router.push({
            path: "/mail/hadPassOn",
            query: {
              order_id: id,
              id: goods_id,
              icon: icon ? 1 : 0
            }
          });
        } else {
          this.$router.push({
            path: "/mail/showCollection",
            query: {
              order_id: id,
              id: goods_id,
              icon: icon ? 1 : 0
            }
          });
        }
      } else {
        this.$router.push({
          path: "/personalCollectionPage",
          query: {
            order_id: id,
            status,
            icon: icon ? 1 : 0
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(10% + 40px);
  margin: 0 20px 30px 20px;

  .medal-img-box {
    position: relative;
    width: 100%;
    cursor: pointer;

    .medal-img {
      display: block;
      width: 100%;
      border-radius: 6px;
    }
    // .medal-mask {
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   width: 100%;
    //   height: 100%;
    //   font-size: 20px;
    //   font-family: PingFangSC-Regular, PingFang SC;
    //   font-weight: bold;
    //   color: #ffffff;
    //   background: rgba(0, 0, 0, 0.6);
    // }
  }

  .medal-name {
    width: 100%;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-top: 15px;
  }
}

@media screen and (max-width: 768px) {
  .medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    margin: 0 1.3333vw 4vw 1.3333vw;

    .medal-img-box {
      .medal-img {
        border-radius: 0.8vw;
      }
      .medal-mask {
        font-size: 4.5333vw;
      }
    }

    .medal-name {
      font-size: 2.6667vw;
      margin-top: 2.6667vw;
    }
  }
}
</style>
